<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Rotating Navigation</title>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <h1>Amazing Article</h1>
        <small>Floring Pop</small>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque
          veniam beatae delectus consectetur ex fugit quos! Modi repellat quis
          totam, minima error dolores, explicabo deserunt laborum, corporis
          atque repudiandae saepe maiores illo dolorem. Inventore quaerat dolor,
          corrupti nostrum ut aliquid minus excepturi corporis, libero quis esse
          at animi? Aperiam assumenda sunt, odio reprehenderit fuga ex nemo,
          dolore distinctio hic, quam deleniti quos a necessitatibus officiis
          veniam at laborum commodi molestias nostrum! Neque eveniet laboriosam
          pariatur perspiciatis. Exercitationem, explicabo, molestias quasi eum
          corrupti commodi unde eveniet quo accusantium, sunt quam doloremque
          numquam. Doloremque earum doloribus rerum neque libero aperiam,
          dolorem nihil.
        </p>
        <h2>My Cat</h2>
        <img src="./images/pori1.jpg" alt="my cat" />
        <img src="./images/pori2.jpg" alt="my cat" />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nemo
          molestias, beatae unde, magni in ullam nam dolorum quasi accusamus
          aliquam quos hic qui vero soluta, fugiat tempore! Quisquam quasi aut
          iusto sequi impedit aliquid ad mollitia autem, similique velit magnam
          cupiditate ipsa debitis cumque, obcaecati laboriosam labore ipsam
          quibusdam architecto. Aut eaque neque, harum ab delectus vel, officiis
          aspernatur vitae consectetur, illo exercitationem nemo blanditiis
          voluptatem? Sit dolores eos nisi aliquid autem nam sint?
        </p>
      </div>
    </div>
    <div class="circle-container">
      <div class="circle">
        <button id="close">
          <i class="fas fa-times"></i>
        </button>
        <button id="open">
          <i class="fas fa-bars"></i>
        </button>
      </div>
    </div>
    <nav>
      <ul>
        <li>
          <a href="#"><i class="fas fa-home"></i>Home</a>
        </li>
        <li>
          <a href="#"><i class="fas fa-user-alt"></i>About</a>
        </li>
        <li>
          <a href="#"><i class="fas fa-envelope"></i>Contact</a>
        </li>
      </ul>
    </nav>
    <script src="app.js"></script>
  </body>
</html>
